<template>
  <div class="orderCard" v-if="this_chargeStation">
        <!-- type为0是立即充电模式 -->
    <div @click="toChargeing">
        <van-steps :active="active" v-if="!choose_time.type">
            <van-step>
                <div class="content">
                    <span>已下单</span>
                    <span>{{buyTime}}</span>
                </div>
            </van-step>
            <van-step>
                <div class="content">
                    <span>正在充电</span>
                    <span>{{buyTime}}</span>
                </div>
            </van-step>
            <van-step>
                <div class="content">
                    <span>充电完成</span>
                    <span>{{finishTime}}</span>
                </div>
            </van-step>
        </van-steps>
        <!-- type为1是预约模式 -->
        <van-steps :active="active" v-else>
            <van-step>
                <div class="content">
                    <span>已下单</span>
                    <span>{{buyTime}}</span>
                </div>
            </van-step>
            <van-step>
                <div class="content">
                    <span>已预约</span>
                    <span>{{buyTime}}</span>
                </div>
            </van-step>
            <van-step>
                <div class="content">
                    <span>正在充电</span>
                    <span>{{start_time}}</span>
                </div>
            </van-step>
            <van-step>
                <div class="content">
                    <span>充电完成</span>
                    <span>{{finishTime}}</span>
                </div>
            </van-step>
        </van-steps>
    </div>
    <div v-if="!show" class="text" @click="toChargeing">{{text}}</div>
    <div @click="toChargeing" v-if="!show"> 
        <chargeDots :status="status_dot" />     
    </div>
    <div class="card">
        <ChargeStationCard 
            :point="this_chargeStation"
            :myposition="myposition"
            :distance="this_chargeStation.distance"
            :show="show"
        />
    </div>
  </div>
</template>

<script>
// import {bd09towgs84} from '@/tool';
import moment from 'moment'
import chargeDots from '@/components/chargeDots/chargeDots.vue'
import ChargeStationCard from '@/components/ChargeStationCard/ChargeStationCard.vue'
import {get_chargeStationby_id} from '@/api/index';
export default {
  name: 'orderCard',
  components: {
      chargeDots,
      ChargeStationCard
  },
  props:["order","show"],
  data(){
        return{
            active: 1,
            this_chargeStation: null,
            // distance:'74km',   //测试先随便整一个
            myposition:null,       
            status_dot:null,
            text:null,
        } 
    },
    computed:{
        choose_time(){
            if(this.show){
                return this.order;
            }
            else return this.$store.state.choose_time;
        },
        buyTime(){
            return this.choose_time.buyTime.split(' ')[1]
        },
        finishTime(){
            return this.choose_time.finishTime.split(' ')[1]
        },
        start_time(){
            return this.choose_time.start_time.split(' ')[1]
        },     
    },
    async created(){
        var center=this.$store.state.myPosition;//凌塘村位置
        this.myposition = {...center};  //我的定位
       let res = await get_chargeStationby_id(this.choose_time.charge_id);
       let this_chargeStation = res.data;
        this.this_chargeStation = {...this_chargeStation};
        //充电圆点设计
        let charge_station_status = this_chargeStation.charge_station_status.split("");
        charge_station_status = charge_station_status.map( item => Number(item));
        this.status_dot = charge_station_status;
        //当前时间
        let nowTime = moment().format('YYYY-MM-DD HH:mm');
        //立即充电类型
        if(this.choose_time.type == 0){
           let flag = moment(nowTime).isSameOrAfter(this.choose_time.finishTime)  //大于充电完成时间
           if(flag){
               this.active = 2;
           }
           else  this.text = `预计${this.finishTime}充电完成`
        }
        else{
            //预约类型
            let flag = moment(nowTime).isSameOrAfter(this.choose_time.finishTime) //大于充电完成时间
            let flag1 = moment(nowTime).isSameOrAfter(this.choose_time.start_time) //大于预约完成时间
            if(flag){
                this.active = 3;
            } 
            else if(flag1){
                this.active = 2;
                this.text = `预计${this.finishTime}充电完成`
            } 
            else this.text = `请于${this.start_time}前到达充电点`
        }
        
    },
    watch:{
        
    },
    methods:{
        toChargeing(){
            if(this.show){
                this.$router.push({ path: 'chargeing', query: { charge_id: this.choose_time.charge_id,show: this.show,order_id: this.order.order_id, lat: this.myposition.lat,lng: this.myposition.lng, distance: this.this_chargeStation.distance }})
            }
            else this.$router.push({ path: 'chargeing', query: { charge_id: this.choose_time.charge_id, lat: this.myposition.lat,lng: this.myposition.lng, distance: this.this_chargeStation.distance }})
        },
        onClickLeft() {
            this.$router.go(-1);
        },
    }
}
</script>

<style lang="less" scoped>
 .orderCard{
    background-color: #fff;
    padding: 10px;
    margin: 10px;
    margin-top: 0;
    border-radius: 10px;
    text-align: left;
    .content{
        display: flex;
    flex-direction: column;
    align-items: center;
    }
    .text{
        color: #38b487;
    text-align: center;
    }
 }
</style>